<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <input type="text" @keyup.enter="searchWeather" value="+" v-model="city">
        <ul>
            <li  v-for="item in weatherList.forecast" :key="item.id" >
                {{item.date}}
                {{item.high}}
                {{item.fengli}}
                {{item.low}} 
                {{item.fengxiang}}
            </li>
        </ul>
        <b>{{weatherList.ganmao}}</b>
        <i>点击城市获取对应的数据</i>
        <b @click="changCity('上海')">上海</b>
        <b @click="changCity('北京')">北京</b>
        <b @click="changCity('南京')">南京</b>
    </div>
</body>
</html>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'测试',
            city:"",
            weatherList:[]
        },
        methods:{
          searchWeather:function(){
                // console.log(this.city)
                debugger
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="
            +this.city)
            .then((res=>{
                // console.log(res.data.data,"数据源") 
                   this.weatherList = res.data.data;
                }))
            .catch(err=>{})
          },
          
          changCity:function(city){
            //   debugger     city = "北京"
              this.city = city;
              this.searchWeather();
          }
        }
    })
</script>